<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>ResetPassword-ProjectManagment</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" th:href="@{/assets/img/icon.ico}" type="image/x-icon"/>
    <div th:replace="commom/bar :: commom_css"></div>
</head>
<body class="login">
<div class="wrapper wrapper-login">
    <div class="container container-login animated fadeIn">
        <h3 class="text-center">重置密码</h3>
        <div class="login-form">
            <form th:action="@{/user}" method="post" onSubmit="return checkpassword();">
                <input type="hidden" name="_method" value="put"/>
                <input type="hidden" name="sid" id="sid" th:if="${param.sid!=null}" th:value="${param.sid}"/>
                <input type="hidden" name="email" id="email" th:if="${param.email!=null}" th:value="${param.email}"/>
                <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
                <div class="form-group form-floating-label">
                    <input id="password" name="password" type="password" class="form-control input-border-bottom"
                           required>
                    <label for="password" class="placeholder">密码</label>
                    <div class="show-password">
                        <i class="flaticon-interface"></i>
                    </div>
                </div>
                <div class="form-group form-floating-label">
                    <input id="confirmpassword" name="confirmpassword" type="password"
                           class="form-control input-border-bottom" required>
                    <label for="confirmpassword" class="placeholder">确认密码</label>
                    <div class="show-password">
                        <i class="flaticon-interface"></i>
                    </div>
                </div>
                <div class="form-action mb-3">
                    <input class="btn btn-primary btn-rounded btn-login" type="submit" value="确认">
                </div>
            </form>
        </div>
    </div>

</div>
<script th:src="@{/assets/js/core/jquery.3.2.1.min.js}"></script>
<script th:src="@{/assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js}"></script>
<script th:src="@{/assets/js/core/popper.min.js}"></script>
<script th:src="@{/assets/js/core/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/ready.js}"></script>
<script type="text/javascript">
    $(function () {
        //异步检查密码是否一致
        $("#confirmpassword").keyup(function () {
            checkpassword();
        })
    })

    //检查密码
    function checkpassword() {
        var password1 = $("#password").val();
        var password2 = $("#confirmpassword").val();
        var confirmpassword = $("#confirmpassword");
        if (password1 === "" || password2 === "") {
            return false;
        }
        if (password1 != password2) {
            confirmpassword.css('borderColor', 'red');
            return false;
        } else {
            confirmpassword.css('borderColor', '');
        }
    }
</script>
</body>
</html>